import Box from '@mui/material/Box';
import Dialog from '@mui/material/Dialog';
import { useTheme } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import DialogContent from '@mui/material/DialogContent';
import useMediaQuery from '@mui/material/useMediaQuery';

import { Iconify } from 'src/components/iconify';

// ----------------------------------------------------------------------

type VideoDialogProps = {
    open: boolean;
    title: string;
    videoUrl: string;
    onClose: () => void;
};

export function VideoDialog({ open, title, videoUrl, onClose }: VideoDialogProps) {
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="lg"
            fullWidth
            fullScreen={fullScreen}
            sx={{
                '& .MuiDialog-paper': {
                    borderRadius: fullScreen ? 0 : 2,
                },
            }}
        >
            {/* ヘッダー */}
            <Box
                sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    p: 2,
                    borderBottom: `1px solid ${theme.palette.divider}`,
                }}
            >
                <Typography variant="h6" sx={{ fontWeight: 600 }}>
                    {title}
                </Typography>
                <IconButton onClick={onClose} size="small">
                    <Iconify icon="mingcute:close-line" width={24} />
                </IconButton>
            </Box>

            {/* ビデオコンテンツ */}
            <DialogContent sx={{ p: 0, bgcolor: 'common.black' }}>
                <Box
                    sx={{
                        position: 'relative',
                        paddingTop: '56.25%', // 16:9 アスペクト比
                        width: '100%',
                    }}
                >
                    <Box
                        component="iframe"
                        src={videoUrl}
                        title={title}
                        sx={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            border: 'none',
                        }}
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                    />
                </Box>
            </DialogContent>
        </Dialog>
    );
}
